<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>循环滚动列表</title>
    <link href="gun.css" rel="stylesheet"/>
    <script src="jquery.min.js"></script>
    <script src="gun.js"></script>
    <script>
        $(function(){
            //下面是调用语句，以ID名区分

            $("#autoScroll01").autoScroll({
                direction: 'left',    //滚动方向，'up'、'down'、'left'、'right'，*必须参数
                interval: 40,      //滚动间隔，单位'ms'，一定要大于'滚动速度'，*必须参数
                speed: 10,      //滚动完成耗时，单位'ms'，一定要小于'滚动间隔'，*必须参数
                distance: 3,      //单次滚动距离，单位'px'，*必须参数
                liWidth: 144,      //单个li的盒模型高度&宽度(包括margin值。左右滚动只有liWidth参数，上下滚动只有liHeight参数)，*必须参数
                showNum: 6      //显示几个li，父级高会自适应，但不要超过最大个数，*必须参数
            });

            $("#autoScroll02").autoScroll({
                direction: 'up',
                interval: 50,      //interval、speed、distance都很小时，就形成了平滑滚动现象。
                speed: 10,
                distance: 1,
                liHeight: 30,
                showNum: 4
            });

            $("#autoScroll03").autoScroll({
                direction: 'down',    //向下滚动
                interval: 2000,     //2秒滚动一次
                speed: 600,      //滚动耗时0.6秒（所以必须2秒内滚完，以免没滚完就执行下一次滚动了）
                distance: 40,     //一次滚动40px
                liHeight: 40,     //单个的li的盒模型高度是40px（上下滚动li没有margin跟padding值）
                showNum: 3      //容器里显示3个li标签
            });

            $("#autoScroll04").autoScroll({
                direction: 'right',
                interval: 2500,     //interval、speed、distance都很大时，就形成了间歇性滚动现象。
                speed: 800,
                distance: 288,
                liWidth: 144,     //左右滚动时，liWidth要算上margin值，注意盒模型
                showNum: 5
            });

        });
    </script>
</head>
<body>
<!-- wrap和boxs box0*这个div非必需,用于布局而已 -->
<div class="wrap">
    <!-- 布局必须结构为：外层容器id，里面是 ul 跟 li -->
    <div class="boxs box01">
        <div class="autoBox" id="autoScroll01">
            <ul class="clearfix">
                <li><a href="#"><img src="images/img01.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/img02.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/img03.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/img04.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/img05.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/img06.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/img07.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/img08.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/img09.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/img10.jpg" alt=""></a></li>
            </ul>
        </div>
    </div>
    <!--第二个案例 保持结构不变，id不同就可以复用多个-->
    <div class="boxs box02">
        <div class="autoBox" id="autoScroll02">
            <ul>
                <li><a href="#">1. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
                <li><a href="#">2. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
                <li><a href="#">3. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
                <li><a href="#">4. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
                <li><a href="#">5. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
                <li><a href="#">6. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
                <li><a href="#">7. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
                <li><a href="#">8. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
            </ul>
        </div>
    </div>
    <div class="boxs box03">
        <div class="autoBox" id="autoScroll03">
            <ul>
                <li><a href="#">1. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
                <li><a href="#">2. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
                <li><a href="#">3. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
                <li><a href="#">4. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
                <li><a href="#">5. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
                <li><a href="#">6. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
                <li><a href="#">7. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
                <li><a href="#">8. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
            </ul>
        </div>
    </div>
    <div class="clear"></div>
    <div class="boxs box04">
        <div class="autoBox" id="autoScroll04">
            <ul class="clearfix">
                <li><a href="#"><img src="images/img01.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/img02.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/img03.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/img04.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/img05.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/img06.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/img07.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/img08.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/img09.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/img10.jpg" alt=""></a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>